<!-- 智能投顾 - 详情 -->
<template>
  <div class="ai">
    <x-header :left-options="{showBack: false}">{{ detail.name }}</x-header>
    <img src="../../../assets/navBar.png" alt="" width="10" class="navBtnai" @click="backBtnai">
    <div class="top-wrap">
      <img src="../../../../static/images/fp/f_bg.png" alt="" style="height: 160px;width: 100%;">
      <div class="aibanner">
        <div class="left">
          <div class="" style="font-size: 17px">{{ detail.titleRate }}</div>
          <div class="" style="font-size: 25px;">{{ detail.rate }}</div>
        </div>
      </div>
      <div class="bannerSty">
        <span v-for="(label, index) in detail.content">{{ label }}</span>
      </div>
    </div>
    <div style=" margin-top: 55px;height: 350px;">
      <ve-line :data="chartData"></ve-line>
    </div>
    <group>
      <cell is-link :arrow-direction="show1 ? 'up' : 'down'" @click.native="show1 = !show1">
        <span slot="title" style="font-size: 14px">基金概况</span>
        <i slot="icon" class="tv-icon"></i>
      </cell>
      <template v-if="show1" >
        <div class="showbox show1" style="font-size: 14px">
          <p>投资结构：
            <span style="color: #ff1010;">60%</span>优先基金+
            <span style="color: #ff1010;">40%</span>劣后基金</p>
          <p style="margin-top: 15px;">投资范围：市值前百的数字货币+有潜力的优质币种+借币业务；</p>
          <p style="margin-top: 15px;">投资策略：投资市场认可度高，具有应用价值和热门概念的币种。灵活操作，双向交易，最终实现基金获取超额利润的目标；</p>
          <p style="margin-top: 15px;">风控措施：与专业基金管理人全面负责项目的甄选、决策和运营，对项目进行主动、全程监管。</p>
        </div>
      </template>
      <cell is-link :arrow-direction="show2 ? 'up' : 'down'" @click.native="show2 = !show2">
        <span slot="title" style="font-size: 14px">产品参数</span>
        <i slot="icon" class="book-icon"></i>
      </cell>
      <!-- <template v-if="show2">
        <div class="showbox show2 show2-ai">
          <div class="item">
            <div class="title">
              <span>起投额度</span>
            </div>
            <div class="content">
              1000元起投
            </div>
          </div>
          <div class="item">
            <div class="title">
              <span>赎回</span>
            </div>
            <div class="content">
              产品到期后T+0可赎回。工作日17:30之前，提现当天到账，17:30 后，下一个工作日。
            </div>
          </div>
          <div class="item">
            <div class="title">
              <span>收益类型</span>
            </div>
            <div class="content">
              固定收益+浮动收益
            </div>
          </div>
          <div class="item">
            <div class="title">
              <span>管理服务费用说明</span>
            </div>
            <div class="content">
              <div>1个月本金的<span style="color: #ff1010">2%</span></div>
              <div>1-6个月赎回：浮动收益的<span style="color: #ff1010">50%</span>；</div>
              <div>6-9个月赎回：浮动收益的<span style="color: #ff1010">40%</span>；</div>
              <div>9-24个月赎回：浮动收益的<span style="color: #ff1010">30%</span>；</div>
              <div>24个月赎回：浮动收益的<span style="color: #ff1010">20%</span>；</div>
            </div>
          </div>
          <div class="item">
            <div class="title">
              <span>收益</span>
            </div>
            <div class="content">
              <div>1个月内赎回：只可赎回本金部分并支付<span style="color: #ff1010">2%</span>的管理费</div>
              <div>1-6个月赎回：<span style="color: #ff1010">4%</span>+浮动收益；</div>
              <div>6-9个月赎回：<span style="color: #ff1010">6%</span>+浮动收益；</div>
              <div>9-24个月赎回：<span style="color: #ff1010">10%</span>+浮动收益；</div>
              <div>24个月赎回：<span style="color: #ff1010">15%</span>+浮动收益；</div>
            </div>
          </div>
        </div>
      </template> -->
      <template v-if="show2" >
        <ul style="font-size: 14px;">
          <li class="otcList">
            <div>
              <span>封闭期</span>
              <span class="fa r15">{{detail.week.replace('天', '')}}天</span>
            </div>
          </li>
          <li class="otcList">
            <div>
              <span>起投条件</span>
              <span class="fa r15">{{detail.join}}</span>
            </div>
          </li>
          <li class="otcList">
            <div>
              <span>预期年华收益率</span>
              <span class="fa r15">{{detail.rate}}</span>
            </div>
          </li>
        </ul>
      </template>
      <cell is-link :arrow-direction="show3 ? 'up' : 'down'" @click.native="show3 = !show3">
        <span slot="title" style="font-size: 14px">风控保障</span>
        <i slot="icon" class="unbrella-icon"></i>
      </cell>
      <template  v-if="show3">
        <div class="showbox show3 show3-ai" style="font-size: 14px">
          <div class="item">
            <div class="content">
              1.优先级资金优先获得本金及约定的收益，劣后级资金承担下跌的 风险，并以自有资金为优先级的本金安全及约定收益做担保，但是 劣后级资金能够获得超过优先级约定收益以外的超额收益。
            </div>
          </div>
          <div class="item">
            <div class="content">
              2.优先级资金选择交易所借币业务和场外套利业务保证本金和固定 收益部份。
            </div>
          </div>
          <div class="item">
            <div class="content">
              3.劣后级资金选择市值投资数字货币+有潜力的优质币种进行投资 交易。
            </div>
          </div>
          <div class="item">
            <div class="content">
              4.为保护全体投资人的利益，设置预警线和止损线；预警线为0.9， 止损线为0.8。
            </div>
          </div>
        </div>
      </template>
    </group>
    <div class="bot-btn-wrap"></div>
    <div class="investment" @click="buy()">立即投资</div>
  </div>
</template>
<script>
  import { XHeader, VChart, VLine, VTooltip, VScale, Cell, Group } from 'vux'
  import moment from 'dayjs'
  import { aiRate, detail } from '../../../service/product'
  import VCharts from 'v-charts'
  import VeLine from 'v-charts/lib/line.common'
  import http from '../../../service/http.js'
  export default {
    components: {
      XHeader,
      VChart,
      VeLine,
      VTooltip,
      VScale,
      Cell,
      Group
    },
    data() {
      return {
        show1: true,
        show2: true,
        show3: true,
        chartData: [],
        detail: {},
        pid: "",
        aiDetail: {},
        chartData: {//展示折线图
          columns: ['日期', '浮动收益率'],
          rows: [],
        }
      }
    },
    async created() {
      await this.getDetail(this.$route.query.pid)
    },
    mounted() {
      this.aiDetail = this.$store.getters.getData
      this.pid = this.$route.query.pid;
      this.getData();
    },
    methods: {
      backBtnai() {
        history.back();
      },
      // 获取折线图数据
      getData() {
        http.get("/product/aiRate").then((res) => {
          if (res.data.status == 200) {
            res.data.rate.forEach((v) => {
              this.chartData.rows.push({
                "日期": v.key.replace('1700', ''),
                "浮动收益率": v.price,
              })
            })
          }
        })
      },
      buy() {
        this.$router.push({ path: '/pay', query: { pid: this.pid, type: 'ai' } })
      },
      async getDetail(pid) {
        const res = await detail(pid)
        if (res.status === 200) {
          this.detail = res.body
        }
      },
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../../static/styles/fp-detail";
  .ai .investment {
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    background-image: linear-gradient(-135deg, #FEDF33 0%, #FE9D09 100%);
    color: #fff;
    width: 100%;
    text-align: center;
    /* border-radius: 25px; */
    width: 100%;
    position: fixed;
    bottom: 0px;
  }

  .ai .vux-header {
    position: relative;
    padding: 3px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #f76c25;
  }

  .icoTop {
    position: absolute;
    top: 0px;
  }

  .ai .vux-header .vux-header-left .left-arrow:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid #fff;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    top: 8px;
    left: 7px;
  }

  .ai .otcList {
    border-bottom: 1px solid #f6f6f6;
    height: 40px;
    line-height: 40px;
    padding: 0px 15px;
    color: #999;
    position: relative;
  }

  .ai .otcList:nth-child(2n) {
    background: #f6f6f6;
  }

  .ai .fr {
    position: relative;
  }

  .ai .fa {
    position: absolute;
  }

  .ai .mgt {
    margin-left: 10px;
  }

  .ai .c4 {
    color: #444;
  }

  .ai .c7 {
    color: #777;
  }

  .ai .r15 {
    right: 15px;
    color: #fea620;
  }

  .ai .bannerSty {
    text-align: center;
    margin-top: 20px;
  }

  .ai .bannerSty span {
    color: #fff;
    border-radius: 15px;
    border: 1px solid #fff;
    padding: 0px 8px;
    margin-right: 5px;
  }

  .ai .aibanner {
    color: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: -150px;
  }

  .navBtnai {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 888;
    transform: rotate(180deg);
  }
</style>